<!DOCTYPE html>
<html>
	
	<title>${messages.page.technology}</title>
	
	<h1>${messages.page.technology}</h1>
	
	<p id="options" class="views">
		View as: <span><a href="/technology" data-ajax="view">List</a> | <a href="/technology?view=table" data-ajax="options view">Table</a></span> 
		Download as: <span><a href="/technology.json">JSON</a> | <a href="/technology?format=xml">XML</a></span>
	</p>
	
	<div id="view">
		<div class="table" data-rendered="${'table' eq requestUtils.getParameter('view')}">
			<table>
				<thead>
					<tr>
						<th>Name</th>
						<th>Version</th>
						<th>Description</th>
					</tr>
				</thead>
				<tbody data-repeat="${technologyList}" data-empty="None.">
					<tr class="${varStatus.index mod 2 eq 0 ? 'odd' : 'even'}">
						<td><a href="/technology/${var.value}">${var.name}</a></td>
						<td>${var.version}</td>
						<td>${stringUtils.ellipsis(var.description, 100)}</td>
					</tr>
				</tbody>
			</table>
		</div>
		<div class="list" data-rendered="${empty requestUtils.getParameter('view')}">
			<div data-repeat="${technologyList}" data-empty="None.">
				<h2><a href="/technology/${var.value}">${var.name}</a></h2>
				<p class="details">
					Version: <span>${var.version}</span>
					Licenses: <span data-repeat="${var.licenses}" 
						data-empty="-" data-var="license" 
						data-var-status="licenseVs">${license.name.concat(licenseVs.last ? '' : ', ')}</span>
				</p>
				<p data-rendered="${not empty var.description}">${var.description}</p>
			</div>
		</div>
	</div>

	<p><a href="/technology/add" class="add">+ Add a new technology</a></p>

</html>